<template>

    <el-dialog
            top="20px"
            :title="defaultValue.title"
            :visible="tableConfig.show"
            @close="tableConfig.show = false"
            :show-close="tableConfig.showClose"
            :destroy-on-close="tableConfig.destroyOnClose"
            width="1100px">


        <ComputerServerDetailed ref="ComputerServerDetailedRef"/>




        <span slot="footer" class="dialog-footer">
            <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
        </span>

    </el-dialog>

</template>

<script>


import ComputerServerDetailed from "../site/ComputerServerDetailed.vue";
import http from '@/utils/http'

export default {
  name: "OpsDromaraFileStorageDetailed",
  components: {
    ComputerServerDetailed
  },
  data(){
    return {
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '详情',
      },
      // 表格的默认值
      tableConfig: {
        // 关闭时销毁 Dialog 中的元素
        destroyOnClose: true,
        // 弹出框是否打开
        show: false,
        // 是否显示关闭按钮
        showClose: true,
      },
      // 列表的尺寸
      size: 'small',
      // tag的大小
      mini: 'mini',
      // tag 的大小
      tagSize: 'small',
      // 描述列表的css
      CS: {
        // 'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      // 描述列表的css
      LS: {
        // 'color': '#000',
        // 'text-align': 'center',
        'font-weight': '600',
        // 'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },
    }
  },
  methods: {
    /**
     * 打开弹出框
     * @param obj 人员信息
     */
    init(obj){
      this.tableConfig.show = true
      this.getComputerServerDetails(obj)
    },
    /**
     * 计算机详情
     */
    getComputerServerDetails(obj) {
      http.post("/computer/getComputerServerDetails", {
        computerServerId: obj.id
      }).then(response => {
        let res = response.data;
        this.$refs.ComputerServerDetailedRef.openComputerServerDetailed(res.data)

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
  },
}
</script>

<style scoped>

</style>


